<?php include('templates/top.php'); ?>

<div class="container">
    <div class="row">
        <?php foreach ($records as $index => $record): ?>
        <div class="col-md-4 mb-4">
            <div class="card">
                <img src="/image/<?= esc($record['image']) ?>" class="card-img-top" style="width: 100%; height: 240px; object-fit: cover;">
                <div class="card-body">
                    <a href="/SpongeBob/showme/<?= esc($record['id']) ?>"><h5 class="card-title"><?= esc($record['name']) ?></h5></a>
                    <p class="card-text"><?= esc($record['description']) ?></p>
                </div>
            </div>
        </div>

        <!-- 每三个卡片换行 -->
        <?php if (($index + 1) % 3 == 0): ?>
        </div><div class="row">
        <?php endif; ?>
        <?php endforeach; ?>
    </div>
</div>

<?php include('templates/bottom.php'); ?>

<!-- 引入 Bootstrap JS 和依赖 -->
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>